<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Signature Pad</title>
    <script src="./js/jquery.min.js"></script>
    <style>
      #signatureCanvas {
        border: 1px solid #000;
        background: url("./images/1.jpg");
      }
      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 800px;
        margin: 0 auto;
      }
      .sign-footer {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
      #savedSignature {
        width: 800px;
        height: 400px;
        background: url("./images/2.jpg");
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 align="center">签名系统</h1>
      
      <!-- Canvas用于绘制签名 -->
      <canvas id="signatureCanvas" width="800" height="400"></canvas><br />

      <div class="sign-footer">
        <!-- 按钮触发保存签名 -->
        <button onclick="saveSignature()">保存签名</button>&nbsp;&nbsp;&nbsp;
        <button onclick="clearSignature()">重新签名</button>&nbsp;&nbsp;&nbsp;
        <button onclick="changeBackground()">更换背景</button>&nbsp;&nbsp;&nbsp;
        <div class="return-sign"><a href="js.html">签名列表</a></div>
      </div>

      <!-- 显示保存的签名图像 -->
      <h2>保存的签名:</h2>
      <img id="savedSignature" alt="" />

      <script>
        document.addEventListener("DOMContentLoaded", function () {
          // 获取Canvas元素
          var canvas = document.getElementById("signatureCanvas");
          var context = canvas.getContext("2d");

          // 设置绘制样式
          context.fillStyle = "rgba(0, 0, 0, 0)";
          context.lineWidth = 2;
          context.strokeStyle = "#000";

          // 定义绘制状态
          var isDrawing = false;

          // 处理鼠标按下事件
          canvas.addEventListener("mousedown", function (event) {
            isDrawing = true;
            context.beginPath();
            context.moveTo(
              event.clientX - canvas.getBoundingClientRect().left,
              event.clientY - canvas.getBoundingClientRect().top
            );
          });

          // 处理鼠标移动事件
          canvas.addEventListener("mousemove", function (event) {
            if (isDrawing) {
              context.lineTo(
                event.clientX - canvas.getBoundingClientRect().left,
                event.clientY - canvas.getBoundingClientRect().top
              );
              context.stroke();
            }
          });

          // 处理鼠标松开事件
          canvas.addEventListener("mouseup", function () {
            isDrawing = false;
          });

          // 处理鼠标离开Canvas事件
          canvas.addEventListener("mouseleave", function () {
            isDrawing = false;
          });
        });

        // 保存签名
        function saveSignature() {
          var canvas = document.getElementById("signatureCanvas");
          var savedSignature = document.getElementById("savedSignature");

          // 将Canvas内容转为图像数据
          var dataURL = canvas.toDataURL("image/png");
           console.log(dataURL);
          // 显示保存的签名图像
          savedSignature.src = dataURL;
          $.ajax({
            url: "http://sign.njpi/api/sign.php",
            method: "post",
            data: {
              userid: 1,
              action: "save",
              signData: dataURL,
            },
            success: (res)=> {
                 console.log(res);
            },
           error:(err) =>{
           console.log(err);
           },        
          });
        }
          //更换背景图⽚
                  function changeBackground() {
             const imgArr = [
             "./images/1.jpg",
             "./images/2.jpg",
             "./images/3.jpg",
             "./images/4.jpg",
             "./images/5.jpg",
             "./images/6.jpg",
             "./images/7.jpg",
             "./images/9.jpg",
             "./images/10.jpg",
             
              ];
             let num = Math.round(Math.random() * 10);
             if (num > 9) num = 9;
             let num2 = Math.round(Math.random() * 10);
             if (num2 > 9) num2 = 9;
             var canvas = document.getElementById("signatureCanvas");
             //使⽤模板字符串替换⽅式更换背景
             canvas.style.backgroundImage = `url('${imgArr[num]}')`;
             const savedSignature = document.getElementById("savedSignature");
             savedSignature.style.backgroundImage = `url('${imgArr[num2]}')`;
             }
          
        // 清除签名
        function clearSignature() {
          var canvas = document.getElementById("signatureCanvas");
          var context = canvas.getContext("2d");

          // 清除Canvas内容 
          context.clearRect(0, 0, canvas.width, canvas.height);
        }
        $.ajax({
url: "http://sign.njpi/api/user.php",
method: "get",
data: { action: "checkLogin" },
success: (res) => {
var result = JSON.parse(JSON.stringify(res));
console.log(result);
if (result.code == 0) {
alert("⽤户未登录", result);
location.href = "login.html";
 }
 },
});
      </script>
    </div>
  </body>
</html>
